<template>
  <div class="header-container">
    <SvgIcon name="home" size="50px" class="cursor-pointer" @click="router.push('/');" />
    <div class="navigation">
      <router-link to="/" class="nav-link">首页</router-link>
      <router-link to="/city-weather" class="nav-link">城市天气查询</router-link>
      <a href="https://www.baidu.com" class="nav-link" target="_blank">百度</a>
    </div>
    <div class="user-section">
      <!-- 暗黑模式开关 -->
      <el-switch
        v-model="isDark"
        class="dark-mode-switch"
        :active-icon="Moon"
        :inactive-icon="Sunny"
      />
      <div v-if="isLoggedIn" class="user-info">
        <span>欢迎，{{ currentUsername }}</span>
        <button @click="logout" class="logout-btn">退出登录</button>
      </div>
      <div v-else class="login-section">
        <button @click="goToLogin" class="login-btn">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import router from '@/router';
  import SvgIcon from '@/components/SvgIcon.vue';
  import { ref, onMounted } from 'vue';
  import { ElMessage, ElSwitch } from 'element-plus';
  import { Moon, Sunny } from '@element-plus/icons-vue';
  import { useDark, useToggle } from '@vueuse/core';

  // 响应式数据
  const isLoggedIn = ref(false);
  const currentUsername = ref('');

  // 暗黑模式相关
  const isDark = useDark();
  useToggle(isDark);

  // 检查登录状态
  const checkLoginStatus = () => {
    // 直接从 localStorage 获取登录状态和用户名
    const savedIsLoggedIn = localStorage.getItem('isLoggedIn');
    const username = localStorage.getItem('username');

    if (savedIsLoggedIn === 'true' && username) {
      isLoggedIn.value = true;
      currentUsername.value = username;
    } else {
      isLoggedIn.value = false;
    }
  };
  // 跳转到登录页
  const goToLogin = () => {
    router.push('/login');
  };

  // 退出登录
  const logout = () => {
    ElMessage.success('登出成功！');
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('username');
    isLoggedIn.value = false;
    currentUsername.value = '';
    // 可以添加重定向到首页的逻辑
    router.push('/login');
  };

  // 组件挂载时检查登录状态
  onMounted(() => {
    checkLoginStatus();
  });
</script>

<style lang="scss" scoped>
  @use 'bootstrap/scss/bootstrap.scss';

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 让元素平均分布 */
    gap: 20px;
    width: 100%;
    height: 100%;
    padding: 0 20px;
  }

  .navigation {
    display: flex;
    gap: 15px;
    margin-left: 20px;
  }

  .nav-link {
    padding: 8px 16px;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;

    &:hover {
      background: #f5f5f5;
    }

    &.router-link-active {
      background: #007bff;
      color: white;
    }
  }

  .user-section {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .login-btn, .logout-btn {
    padding: 8px 16px;
    border: 1px solid #007bff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .login-btn {
    background: #007bff;
    color: white;

    &:hover {
      background: #0056b3;
      border-color: #0056b3;
    }
  }

  .logout-btn {
    background: white;
    color: #007bff;

    &:hover {
      background: #b3ff6b;
    }
  }

  .dark-mode-switch {
    margin-right: 10px;
  }
</style>
